<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <% include("/include/header3.html",{"title":"系统用户表编辑页"}){} %>
</head>
<body>

<div id="app">
  <div class="mainBox ">
    <div class="main-container layui-card">
      <div class="layui-card-body">

         <t-form ref="formRef" :data="form" :rules="rules" :disabled="loading" scroll-to-first-error="smooth" colon requiredMark>
           <t-row :gutter="[50,20]">
            <t-col :xs="12" :sm="6">
              <t-form-item label="账号" name="account">
                <t-input v-model="form.account" :readonly="form.id" placeholder="请输入账号" :maxlength="50" show-limit-number clearable></t-input>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="密码" name="password">
                <t-input v-model="form.password" :readonly="form.id" placeholder="请输入密码" type="password" :maxlength="100" show-limit-number clearable></t-input>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="昵称" name="nickName">
                <t-input v-model="form.nickName" placeholder="请输入昵称" :maxlength="50" show-limit-number clearable></t-input>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="姓名" name="name">
                <t-space>
                  <t-input v-model="form.name" readonly placeholder="请输入姓名" :maxlength="100" show-limit-number clearable></t-input>
                  <t-button @click="openSelPerson">选择人员</t-button>
                </t-space>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="手机" name="phone">
                <t-input v-model="form.phone" placeholder="请输入手机" :maxlength="20" show-limit-number clearable></t-input>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="状态" name="status">
                <t-select v-model="form.status" :options="statusOptions" placeholder="请选择状态" clearable></t-select>
              </t-form-item>
            </t-col>
          </t-row>
        </t-form>

      </div>
    </div>
  </div>
  <div class="bottom">
    <t-space class="button-container ">
      <t-button :loading="loading" theme="primary" @click="onSave"><i class="layui-icon layui-icon-ok mr-5 text-size-14"></i>保存</t-button>
      <t-button theme="warning" @click="closeBtn.close"><i class="layui-icon mr-5 text-size-14" :class="closeBtn.i"></i>{{closeBtn.t}}</t-button>
    </t-space>
  </div>
</div>

<script>
  const PATH_URL = "sys/user/";
  const PERSON_URL = "sys/person/";
</script>

<script>

  setupVue("#app", {
    setup() {
      // 表单相关
      const loading = Vue.ref(false);
      const formRef = Vue.ref(null);
      const form = Vue.ref({
        account: null,
        password: null,
        personId: null,
        nickName: null,
        name: null,
        phone: null,
        status: 1,
      });
      const rules = {
        account: [$required('请输入账号')],
        password: [$required('请输入密码')],
        nickName: [$required('请输入昵称')],
        name: [$required('请输入姓名')],
        phone: [$existRules('请输入正确的手机', 'phone')],
        status: [$required('请选择状态')],
      };
      // 获取表单数据
      const getForm = (id) => req(axiosGet, PATH_URL + "getInfo", { id }, (res) => {
        if (res.code === 200) {
          form.value = res.data;
        } else {
          $baseAlert(res.msg, () => closeBtn.value.close());
        }
      }, loading);
      const LyData = getLayerData();
      if (LyData && LyData.id) getForm(LyData.id);
      else {

      }

      //  状态（ 0停用 1启用）选项
      const statusOptions = [{ label: "启用", value: 1 }, { label: "停用", value: 0 }];

      // 点击保存
      const onSave = () => {
        formRef.value.validate().then((validateResult) => {
          if (validateResult && Object.keys(validateResult).length) {
            const firstError = Object.values(validateResult)[0]?.[0]?.message;
            $baseMsg(firstError);
          } else {
            let REQ;
            let URL;
            if (form.value.id) {
              REQ = axiosPut, URL = PATH_URL + "update";
            } else {
              REQ = axiosPost, URL = PATH_URL + "add";
            }
            req(REQ, URL, form, (res) => {
              $baseAlert(res.msg, () => {
                if (res.code === 200) closeLayer(parent.reloadData);
              })
            }, loading);
          }
        });
      }


      // 选择人员
      const openSelPerson = () => {
        openLayer({
          parent: true,
          area: ["80%", "90%"],
          title: "选择人员",
          content: PERSON_URL + "sel",
          data: {
            personIds: form.value.personId,
            callback: (row) => {
              form.value.name = row.name;
              form.value.phone = row.phone;
              form.value.personId = row.id;
              if (row.avatar) form.value.avatar = row.avatar;
              if (!form.value.nickName) {
                form.value.nickName = row.name;
              }
            },
          },
        })
      }

      const closeBtn = useCloseBtn();
      return {
        closeBtn,
        formRef, loading, form, rules,
        onSave,
        statusOptions,
        openSelPerson,
      }

    },
  });
</script>


</body>
</html>
